<template>
	<view>
		<view class="daochu-box" v-show="projectInfo.plan_name">
		    <view class="xunjian-list">
		        <view class="xunjian-flex">
		            <view class="xunjian-title xunjian-title-top">{{projectInfo.plan_name}}</view>
					<view class="xunjian-b">
						<view>任务周期：<text class="xunjian-blue">{{projectInfo.begintime}} {{projectInfo.endtime == '' ? '- 长期' : projectInfo.begintime == projectInfo.endtime ? '' : '- '+projectInfo.endtime}}</text></view>
						<view>周期：每{{projectInfo.circle_type == 1 ? '日' : projectInfo.circle_type == 2 ? '周' : '月'}}巡检</view>
						<view>时间：<text class="xunjian-time">{{projectInfo.times}}</text></view>
					</view>
		        </view>
		    </view>
			<view class="project-title">巡检列表</view>
			<mescroll-body height="auto" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			    :up="upOption" style="width: 100%;">
				<view class="xunjian-z-list-content">
					<view class="xunjian-z-list" v-for="(item,index) in dataList" :key="index">
						<view class="xunjian-z-list-flex" @tap="goto_detail(item)">
							<view class="xunjian-z-title">
								<view style="flex: 1;font-size: 15px;">{{item.area_name}}-{{item.site_name}}</view>
								<view class="xunjian-title-r">
									<text v-if="item.status == 0" class="pub-blue">待巡检</text>
									<text v-if="item.status == 1" class="pub-green">已巡检</text>
									<text v-if="item.status == -1" class="pub-green">漏检</text>
								<view class="iconfont icon-youjiantou"></view></view>
							</view>
							<view class="xunjian-z-b" v-if="item.status == 1 && item.checktime != 0">
								巡检时间：<text class="xunjian-time">{{$lib.$utils.timestampToTime(item.checktime)}}</text>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data(){
			return {
				projectInfo:{},
				project_id:0,
				dataList: [],
				mescroll: null, //mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的常用配置
				downOption: {
				    use: true, // 是否启用下拉刷新; 默认true
				    auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				    native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
				},
				// 上拉加载的常用配置
				upOption: {
				    use: true, // 是否启用上拉加载; 默认true
				    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				    page: {
				        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				        size: 20 // 每页数据的数量,默认10
				    },
				    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				    empty: {
				        tip: '暂无相关数据'
				    }
				},
			}
		},
		onShow(){
			this.canReset && this.mescroll.resetUpScroll() // 自行实现的刷新指定一条数据
			this.canReset && this.mescroll.scrollTo(0,0)
			this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
		},
		onLoad(opts){
			if(opts){
				this.project_id = opts.id
			}
		},
		computed: {
		    ...mapState(['userInfo']),
		},
		methods:{
			goto_detail(item){
				uni.navigateTo({
					url:'/pages/xunjian/index?id=' + item.id
				})
			},
			/*上拉加载的回调*/
			async upCallback(page, item) {
			    let pageNum = page.num; // 页码, 默认从1开始
			    let pageSize = page.size; // 页长, 默认每页10条
			    let res = await this.$lib.$http.post({
			        url: this.$lib.$urlMap.projectInfo,
			        data: {
			            page: pageNum,
			            limit: pageSize,
						project_id:this.project_id,
			        },
			        needLogin: true
			    })
			    if (res.code == 1) {
					this.projectInfo = res.data.project_info
			        // console.log(res)
			        // 接口返回的当前页数据列表 (数组)
			        let curPageData = res.data.data;
			        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
			        let curPageLen = curPageData.length;
			        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
			        // let totalPage =Math.ceil(totalSize/pageSize);
			        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
			        let totalSize = res.data.length;
			        // 接口返回的是否有下一页 (true/false)
			        // let hasNext = data.xxx;
			        this.mescroll.endBySize(curPageLen, totalSize);
			
			        //设置列表数据
			        if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
			        this.dataList = this.dataList.concat(curPageData); //追加新数据
			    } else {
			        this.mescroll.endErr()
			    }
			},
		}
	}
</script>

<style>
    page {
        background: #f5f5f5;
    }

    .daochu-box {
        font-size: 16px;
        padding-top: 14px;
    }

    .xunjian-list {
		padding: 14px 0;
		display: flex;
		align-items: self-start;
		background: #fff;
		border-radius: 5px;
		box-shadow: 1px 2px 4px rgb(2 2 2 / 5%);
		width: 93%;
		margin: 0 auto;
		margin-bottom: 14px;
		flex-direction: column;
	}

    .xunjian-flex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 16px;
		width: 100%;
    }
	.xunjian-title {
		display: flex;
		align-items: center;
		padding: 0 14px;
		font-size: 14px;
	}
	.xunjian-title-top  {
		border-bottom: solid 1px #f3f3f3;
		margin-bottom: 10px;
		padding-bottom: 14px;
		font-size: 16px;
		justify-content: space-between;
	}
	.xunjian-b{
		width: 92%;
		margin: 0 auto;
		font-size: 14px;
		line-height: 24px;
	}
    .xunjian-time {
        color: #9b9b9c;
    }
	.xunjian-blue {
		color: #313131;
		font-weight: bold;
	}
	.uni-fab__content--other-platform{
		box-shadow:none!important;
	}
	.xunjian-title-r {
		font-size: 14px;
		display: flex;
		align-items: center;
	}
	.xunjian-title-r text{margin-right: 4px;}
	.xunjian-z-list-content{
		margin-top: 9px;
		font-size: 14px;
		width: 100%;
	}
	.xunjian-z-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 92%;
		padding: 0 14px;
	}
	.xunjian-z-list{
		width: 93%;
		background: #fff;
		margin-bottom: 12px;
		margin: 0 auto 12px;
		border-radius: 5px;
		box-shadow: 1px 2px 4px rgb(2 2 2 / 5%);
	}
	.xunjian-z-list-flex{
	    padding: 14px 0;
	    display: flex;
	    align-items: flex-start;
		flex-direction: column;
	}
	.project-title{
	    font-size: 14px;
	    color: #7b7b7b;
	    width: 93%;
	    margin: 0 auto;
	}
	.xunjian-title-r .iconfont{
	    font-size: 14px;
		margin-top: 2px;
	}
	.xunjian-z-b{
		width: 100%;
		padding: 8px 15px 0;
	}
</style>